import Vue from 'vue'
import 'normalize.css/normalize.css'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

import '@/styles/index.scss' // global css

import App from './App'

import store from './store'

import router from './router'

// 注册svg
import '@/icons'



//自定义全局指令，处理按钮权限控制
/*
作用：根据当前用户权限，判断是否控制按钮
用法：在组件的对应按钮元素上，加上该自定义指令
    如：<button v-auth-btn="'park:building:add_edit'">添加</button>
*/
const adminPerms = '*:*:*'// 管理员权限特殊处理
Vue.directive('auth-btn', {
  inserted(el, data) {//el：当前按钮元素，data：当前指令对象
    console.log(el, data.value)
    //获取当前用户的权限
    const perms = store.state.user.profile.permissions
    // 判断当前用户权限是否包含当前按钮权限，如果不包含，则移除该按钮
    if (!perms.includes(data.value) && !perms.includes(adminPerms)) {
      el.remove()
    }
  }
})

// 全局注册组件：用于按钮权限控制
/*
用法：
<auth-button btn-string="park:building:remove">
  <el-button size="mini" type="text" @click="confirmDel(scope.row.id)">删除</el-button>
</auth-button>
*/
import AuthButton from '@/components/AuthButton.vue';
Vue.component('auth-button', AuthButton)


Vue.use(ElementUI)

Vue.config.productionTip = false

// vue实例化
new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
})
